<template>
    <div style="position: relative;" @mouseover="show=true" @mouseout="mouse_out()" :style="cssVars">
        <div id="btn_pos">
            <!-- ROV图像：<input type="text" v-model="remote_addr"> -->
            <button @click="connetc_open_video()" v-show="on_off">打开视频</button>
            <button @click="close_video()" v-show="!on_off">关闭视频</button>
        </div>
        <!-- <div id="video-container" style="width: 641px;"></div> -->
        <canvas id="video-canvas" :width="vw" :height="vh" v-show="sw1"></canvas>
        <canvas :width="vw" :height="vh" v-show="!sw1"></canvas>
        <div id="rec_toolbar" v-show="show">
            <i id="icon_record" v-show="recording" :class="{touming: GiveIt, red: !GiveIt }">ixii</i>
            <span @click="toggle_record()">{{record}}</span>
            <i v-show="recording" id="tim_record" > {{rec_time}}</i>
        </div>
    </div>
    <!-- <p>视频地址：{{ url }}</p> -->

</template>

<script setup>
    import { ref, onMounted,onUnmounted,inject, computed, watch } from 'vue'
    import JSMpeg from '/src/assets/jsmpeg/index.js'

    const remote_addr = inject('serve_addr')
    let video = null
    const props = defineProps({
        vw:{
            type: Number,
            default: 640
        },
        vh:{
            type: Number,
            default: 480
        },
        cam1:{
            type: Boolean,
            default: true 
        }
    })
    const cssVars = computed(()=>{
        return{
            '--hh': Math.abs(props.vh) - 30 +'px',
        }
    })
    onUnmounted(()=>{
        if(video){
            video.stop()
            video.destroy()
            video = null
        }
    })
    const on_off = ref(true)
    const sw1 = ref(true)
    
    const url = computed(()=>{
        return 'ws://' + remote_addr.value + ':9999/pull/'+(props.cam1 ? 'net_cam':'test')
    }) 
    function connetc_open_video() {
        if(video){
            video.play()
            on_off.value = false
            sw1.value = true
            return 0
        }
        const canvas = document.getElementById('video-canvas');
        
        var player = new JSMpeg.Player(url.value/*'ws://127.0.0.1:9999/pull/test'*/, {
            canvas: canvas,
            //contianer: div,
            audio: false,
            pauseWhenHidden: false,
            videoBufferSize: 10 * 1024 * 1024,
        });
        if(url.value.match('test')){
            player.rotate(180)
        }
        video = player
        window.rov_vv = player  
        //console.log(player)
        on_off.value = false
        
    }
    watch(url,(v2,v1)=>{
        if(video){
            video.setUrl(v2)/*
            if(v2.match('test')){
                video.canvas.width = 1280
                video.canvas.height = 480
                video.canvas.style="transform:rotate(180)"
            }else{
                video.canvas.width = 1024
                video.canvas.height = 600
                video.canvas.style="transform:rotate(0)"
            }*/

        }
    })
    function close_video(){
        if(video){
            const w = video.renderer.canvas.width
            const h = video.renderer.canvas.height
            video.pause()
            video.renderer.canvas.width  = w
            video.renderer.canvas.height = h

            //video.canvas.style="background-color:#f0f0fd;"
        }
        sw1.value = false
        on_off.value = true
    }

    const show = ref(false)
    const record = ref('录制')
    const recording = ref(false)
    let is_record = false

    const GiveIt = ref(false)
    let begin_time = ref(0)//new Date()
    let cur_time = ref(0)//new Date()
    setInterval(()=>{
        GiveIt.value = !GiveIt.value
        //cur_time.value = new Date()
    },500)
    setInterval(()=>{
        cur_time.value = new Date()
    },10)

    const  rec_time = computed(()=>{
        const cha = cur_time.value - begin_time.value
        let min = Math.floor(cha/1000/60)
        if(min<10) min ='0'+min.toString()
        let sec = cha/1000%60
        if(Math.floor(sec)<10){
            sec='0'+sec.toFixed(2)
        }else{
            sec=sec.toFixed(2)
        }
        return `${min}:${sec}`

    })
    function toggle_record(){
        if(!video) return
        //console.log('@@@@@@@@@@@@@@@@@@@@@@@@@@')
        if(!is_record){
            is_record = true
            show.value = true
            record.value = 'End'
            recording.value = true
            video.startRecording('ws')
            begin_time.value = new Date()
            cur_time.value = new Date()

            return
        }
        if(is_record){
            is_record=false
            record.value='录制'
            recording.value=false
            video.stopRecording('rov_')
            return
        }
    }
    function mouse_out(){
        if(is_record){
            //show.value = true
            //console.log('FFFFFFFFFF')
            return
        }
        show.value = false
    }
    onMounted(()=>{
        connetc_open_video()
    })
</script>

<style scoped>
    input {
        width: 24em;
        font-size: 1.1em;
    }
    canvas{
        border: 1px dashed #989898;
    }
    #btn_pos{
        position: absolute;
        top: 0px;
        left: calc(100% + 0.1em);
        z-index: 2;
        width: 7em;
        display: none;
    }
    #rec_toolbar{
        position: absolute;
        top: var(--hh);
        left: 20px;
    }
    #rec_toolbar span{
        cursor: pointer;
        font-weight: 600;
        font-size: 0.9em;
        color: red;
        padding: 1px 2px;
        border-radius: 15%;
        border: 1px dotted #a8a8a8;
    }
    #icon_record{
        color:transparent;
        border-radius: 50%;

    }
    #tim_record{
        margin-left: 20px;
        color: #02ff03;
        background: rgba(22,21,11,0.6);
        padding: 1px 2px;
    }
    .touming{
        background-color: transparent;
    }
    .red{
        background-color: #c91f37;
    }
</style>
